<template>
    <div >
        <!--导航条-->
        <div id="Tabbar">
            <span>全部产品分类</span>
        </div>
        <!--内容-->
        <div id="classify">
            <div v-for="i in imgs6" class="classify-List">
                <p class="classify-List-p">{{i.type}}</p>
                
                    <div class="classify-flex">
                        <div v-for="j in i.content" class="classify-List-div">
                            <router-link :to="'/GoodsList/'+i.type+'/'+j.type">
                                <img :src="j.img" alt="">
                                <p>{{j.type}}</p>
                            </router-link>
                        </div>
                    </div>
                
                
            </div>
        </div>
        
        <Tabbar></Tabbar>
    </div>
</template>

<script>
import Tabbar from '../pages/Tabbar.vue';
import {mapState} from 'vuex'
export default {
    computed:{
        ...mapState([
            "imgs6",
        ])
    },
    components:{
        Tabbar
    },
    mounted:function(){
        
        this.$store.dispatch("classify")
        
        
    }
}
</script>

<style scoped>
    #classify{
        height: calc(100vh - 10vh);
        overflow-y: scroll;
        padding-top: 8vh;
        background-color: #f0f0f0;
    }
    #Tabbar{
        position: fixed;
        height: 8vh;
        width: 100vw;
        background-color: black;
        color: white;
        font-size: 4.5vw;  
        text-align: center;
        line-height: 8vh;
    }
    .classify-List{
        /*margin-top: 10vh;*/
    }
    
    .classify-flex{
        display: flex;
        flex-wrap: wrap;
    }
    .classify-List-p{
        text-align: center;
        margin: 1vh 0;
    }
    .classify-List-div{
        width: 33%;
        background-color: white;
        border: solid 1px #f0f0f0;
        padding-bottom: 0.5vh
    }
    .classify-List-div img{
        width: 25vw;
        margin-left: 4vw;
    }
    .classify-List-div p{
        font-size: 4vw;
        text-align: center;
    }
    a{
        text-decoration: none;
        color: gray;

    }
    a p{
        margin: 0;
    }
</style>